<template>
  <div class="admin_page">
    <admin-header></admin-header>
    <admin-side-bar></admin-side-bar>
    <admin-container>
      <el-form inline size="mini" label-width="80px">
        <el-form-item label="">
          <el-input placeholder="名称" prefix-icon="el-icon-search"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button type="primary">搜索</el-button>
          <el-button type="success" @click="add">添加</el-button>
        </el-form-item>
      </el-form>
      <el-table v-loading="appLoading" :data="list" border size="mini">
        <el-table-column type="index"></el-table-column>
        <el-table-column label="名称" prop="name"></el-table-column>
        <el-table-column label="排序" prop="sort"></el-table-column>
        <el-table-column label="修改时间" prop="etime"></el-table-column>
        <el-table-column label="人数"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click="del(row)">
              删除
            </el-button>
            <el-button type="text" size="mini" @click="modify(row)">
              修改
            </el-button>
            <el-button type="text" size="mini" @click="menu(row)">
              菜单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </admin-container>
    <role-add-dialog ref="addDialog" @ok="getList"></role-add-dialog>
    <role-set-menu-dialog ref="menuDialog" @ok="getList"></role-set-menu-dialog>
  </div>
</template>

<script>
import AdminHeader from "../../../components/admin/header";
import AdminSideBar from "../../../components/admin/side-bar";
import AdminContainer from "../../../components/admin/container";
import { AppLoadingMixin } from "../../../lib/mixins/app-loading";
import RoleAddDialog from "../../../components/admin/role/add-dialog";
import RoleSetMenuDialog from "../../../components/admin/role/set-menu-dialog";

export default {
  name: "Role",
  components: {
    RoleSetMenuDialog,
    RoleAddDialog,
    AdminContainer,
    AdminSideBar,
    AdminHeader
  },
  mixins: [AppLoadingMixin],
  data() {
    return {
      list: []
    };
  },
  mounted() {
    this.getList();
  },
  methods: {
    add() {
      this.$refs.addDialog.show();
    },
    modify(data) {
      this.$refs.addDialog.show(data);
    },
    del(data) {
      this.$confirm(`是否删除${data.name}?`).then(async () => {
        if (await this.$adminService.roleDel(data.id)) {
          this.$message.success("删除成功");
          this.getList();
        }
      });
    },
    menu(data) {
      this.$refs.menuDialog.show(data);
    },
    async getList() {
      this.list = await this.$adminService.roleList();
    }
  }
};
</script>

<style scoped lang="scss"></style>
